<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人页面</title>
    <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
    <style>
        /* 重置所有元素的外边距、内边距和盒模型 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

        /* 设置页面的背景图片和颜色 */
        body {
            color: #fff;
            background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.fe2cb92a9809a66b8ea0b5046d1ed9aa?rik=%2fV8LlDUqV6ALpg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f17%2fc2%2f24561028_1376699679461.jpg&ehk=B6h1WTUP7MXtzYqgUfEXmcFR2epNpUivg8Ev2udBFXA%3d&risl=&pid=ImgRaw&r=0);
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* 设置导航栏的样式 */
        .header {
            position: fixed;
            /* 将导航栏固定在页面顶部 */
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 10%;
            /* 设置导航栏内边距 */
            background: transparent;
            /* 设置导航栏背景为透明 */
            display: flex;
            /* 将导航栏的子元素设置为flex布局 */
            justify-content: space-between;
            /* 将导航栏子元素分散对齐 */
            align-items: center;
            /* 将导航栏子元素垂直居中对齐 */
            z-index: 100;
            /* 将导航栏设置为最上层 */
        }

        /* 设置导航栏Logo的样式 */
        .logo {
            font-size: 25px;
            /* 设置字体大小 */
            color: #fff;
            /* 设置字体颜色 */
            text-decoration: none;
            /* 取消下划线 */
            font-weight: 600;
            /* 设置字体粗细 */
            cursor: default;
            /* 设置鼠标样式为默认 */
            opacity: 0;
            /* 设置初始透明度为0 */
            animation: slideRight 1s ease forwards;
            /* 设置动画效果 */
        }




        /* 设置导航栏链接的样式 */
        .navbar a {
            display: inline-block;
            /* 将链接设置为块级元素 */
            font-size: 18px;
            /* 设置字体大小 */
            color: #fff;
            /* 设置字体颜色 */
            text-decoration: none;
            /* 取消下划线 */
            font-weight: 500;
            /* 设置字体粗细 */
            margin-left: 35px;
            /* 设置左侧间距 */
            opacity: 0;
            /* 设置初始透明度为0 */
            transition: 0.3s;
            /* 设置过渡效果 */
            animation: slideTop 1s ease forwards;
            /* 设置动画效果 */
            animation-delay: calc(.2S * var(--i));
            /* 设置动画延迟时间 */
        }

        /* 设置导航栏链接的鼠标悬停和点击样式 */
        .navbar a:hover,
        .navbar a:active {
            color: #b7b2a9;
            /* 设置字体颜色 */
        }

        /* 设置首页的样式 */
        .home {
            position: relative;
            /* 设置为相对定位，用于子元素定位 */
            width: 100%;
            height: 100vh;
            /* 设置高度为视口高度 */
            display: flex;
            /* 将子元素设置为flex布局 */
            justify-content: space-between;
            /* 将子元素分散对齐 */
            align-items: center;
            /* 将子元素垂直居中对齐 */
            padding: 70px 10% 0;
            /* 设置内边距 */
        }

        /* 设置首页内容的样式 */
        .home-content {
            max-width: 600px;
            /* 设置最大宽度 */
        }

        /* 设置首页标题的样式 */
        .home-content h3 {
            font-size: 32px;
            /* 设置字体大小 */
            font-weight: 700;
            /* 设置字体粗细 */
            opacity: 0;
            /* 设置初始透明度为0 */
            animation: slideBottom 1s ease forwards;
            /* 设置动画效果 */
            animation-delay: .7s;
            /* 设置动画延迟时间 */
        }


        /* 设置首页标题中的颜色 */
        .home-content h3 span {
            color: #b7b2a9;
        }

        .text {
            /* 添加光标效果 */
            border-right: 2px solid white;
            /* 添加光标闪烁效果 */
            animation: blink 0.5s step-end infinite;
        }

        /* 设置首页内容标题的样式 */
        .home-content h3:nth-of-type(2) {
            margin-bottom: 30px;
            /* 设置下方间距 */
            animation: slideTop 1s ease forwards;
            /* 设置动画效果 */
            animation-delay: .7s;
            /* 设置动画延迟时间 */
        }

        /* 设置首页内容主标题的样式 */
        .home-content h1 {
            font-size: 56px;
            /* 设置字体大小 */
            font-weight: 700;
            /* 设置字体粗细 */
            margin: -3px 0;
            /* 设置上下间距 */
            opacity: 0;
            /* 设置初始透明度为0 */
            animation: slideRight 1s ease forwards;
            /* 设置动画效果 */
            animation-delay: 1s;
            /* 设置动画延迟时间 */
        }

        /* 设置首页内容段落的样式 */
        .home-content p {
            font-size: 18px;
            /* 设置字体大小 */
            animation: slideLeft 1s ease forwards;
            /* 设置动画效果 */
            animation-delay: .7s;
            /* 设置动画延迟时间 */
        }

        /* 设置首页图片的样式 */
        .home-img img {
            max-width: 450px;
            /* 设置最大宽度 */
            border-radius: 50%;
            /* 设置圆角 */
            margin-right: -20px;
            /* 设置右侧间距 */
            box-shadow: 0 0 20px #b7b2a9;
            /* 设置阴影效果 */
            opacity: 0;
            /* 设置初始透明度为0 */
            animation: zoomIn 1s ease forwards, floatImg 4s ease-in-out infinite;
            /* 设置动画效果 */
            animation-delay: 2s 3s;
            /* 设置动画延迟时间 */
        }

        .social-media a {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background: transparent;
            border: 2px solid #b7b2a9;
            color: #b7b2a9;
            text-decoration: none;
            font-size: 20px;
            margin: 30px 15px 30px 0;
            transition: 0.5s ease;
            opacity: 0;
            animation: slideLeft 1s ease forwards;
            animation-delay: calc(0.2s * var(--i));
        }

        .social-media a:hover {
            background: #b7b2a9;
            color: #1f252d;
            box-shadow: 0 0 20px #b7b2a9;
        }

        .btn {
            display: inline-block;
            padding: 12px 28px;
            background: #b7b2a9;
            text-decoration: none;
            border-radius: 40px;
            box-shadow: 0 0 10px #b7b2a9;
            font-size: 16px;
            color: #1f252d;
            letter-spacing: 1px;
            font-weight: 600;
            transition: 0.5s ease;
            opacity: 0;
            animation: slideTop 1s ease forwards;
            animation-delay: 2s;
        }

        .btn:hover {
            box-shadow: 0 0 20px #b7b2a9;
        }

        .btn:active {
            background: none;
            color: #b7b2a9;
            border: 2px solid #b7b2a9;
        }

        /*动画*/
        @keyframes blink {

            from,
            to {
                border-color: transparent;
                /* 透明边框颜色 */
            }

            50% {
                border-color: white;
                /* 黑色边框颜色 */
            }
        }

        @keyframes slideRight {
            0% {
                transform: translateX(-100px);
            }

            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }

        @keyframes slideLeft {
            0% {
                transform: translateX(100px);
            }

            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }

        @keyframes slideTop {
            0% {
                transform: translateY(100px);
            }

            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }

        @keyframes slideBottom {
            0% {
                transform: translateY(-100px);
            }

            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }

        @keyframes zoomIn {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes floatImg {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-36px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <header class="header">
        <!-- 网站Logo -->
        <a href="/static/index.png" class="logo">
            kj的库存管理系统
        </a>
        <!-- 导航栏 -->
        <nav class="navbar">
            <!-- 导航栏选项1 -->
            <a href="{% url 'admin:index' %}" class="item" style="--i:1">库存管理</a>
            <!-- 导航栏选项2 -->
            {% comment %} <a href="#" class="item" style="--i:2">你的个人卡片</a> {% endcomment %}
            <!-- 导航栏选项3 -->
            {% comment %} <a href="#" class="item" style="--i:3">Skills</a> {% endcomment %}
            <!-- 导航栏选项4 -->
            {% comment %} <a href="#" class="item" style="--i:4">Me</a> {% endcomment %}
        </nav>
    </header>

    <!-- 主页部分 -->
    <section class="home">
        <!-- 主页内容 -->
        <div class="home-content">
            <!-- 主页标题 -->
            <h3>欢迎使用库存管理系统</h3>
            <h1>你好，{{username}}</h1>
            <!-- 主页小标题 -->
            <h3>
                <!-- 小标题下的文本 -->
                <span class="text">
                </span>
            </h3>
            <!-- 主页正文 -->
            <p>越努力，越幸运！！！Lucky!</p>
            <!-- 社交媒体链接 -->
            <!-- 主页按钮 -->
            {% comment %} <a href="#" class="btn">Learn More</a> {% endcomment %}
        </div>
        <!-- 主页图片 -->
        <div class="home-img">
            <img src="https://img.wxcha.com/m00/54/ed/69d26be4a4ac700e27c2d9cf85472b8c.jpg" alt="">
        </div>
    </section>

    <script>
        var text = document.querySelector('.text'); // 获取显示文本的元素
        {% for p in permissions %}
        var str = ['你的权限包括', '{{p}}']; // 要打印的字符串数组
        {% endfor %}
        {% comment %} var str = ['你的权限包括', '权限1', '权限2']; // 要打印的字符串数组 {% endcomment %}
        function writeText(t, delay = 200) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    text.innerHTML = t; // 显示当前字符串 t
                    resolve(); // Promise 完成
                }, delay) // 延迟 delay 毫秒后执行
            })
        }

        async function main(str) {
            while (true) { // 无限循环
                for (let j = 0; j < str.length; j++) {
                    // 写入
                    for (let i = 0; i <= str[j].length; i++) {
                        await writeText(str[j].substr(0, i)) // 显示当前字符串的前 i 个字符
                    }
                    // 回退
                    // 回退前先等一秒
                    await new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve(); // 等待 1000 毫秒后 Promise 完成
                        }, 1000) // 等待 1000 毫秒
                    })
                    for (let i = str[j].length; i >= 0; i--) {
                        await writeText(str[j].substr(0, i), 200) // 显示当前字符串的前 i 个字符，间隔 200 毫秒
                    }
                }
            }
        }
        main(str)
    </script>
</body>

</html>